<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格与表单</title>
  <style>
    table{
      width: 600px;
      border-collapse: collapse;
      border: 2px gray solid;
    }
    td{
      border:1px solid gray;
      padding: 6px;
    }
  </style>
</head>
<body>
<!--form：代表表单组件，有一些常用属性：
    ① name: 代表表单的名字
    ② action: 提交表单数据到后台的地址。
    ③ method: 代表提交的请求方式，可以取值：
      get: 将请求数据以地址栏的形式提交到后台，因为数据都会显示在地址栏，所以不安全。
           受地址栏请求数据不超过1024bytes的限制，所以数据较大不适合
      post：将请求数据以请求体的方式提交到后台。
-->
<form action="/student/add" method="get" name="form1">
<table>
  <tr>
    <td colspan="2" align="center" height="40" bgcolor="#add8e6">
      学生注册
    </td>
  </tr>
  <tr>
    <td>
      姓名：
    </td>
    <td>
      <input type="text" name="sname">
    </td>
  </tr>
  <tr>
    <td>
      性别：
    </td>
    <td>
      <!--单选按钮：
         ① 一次只能选择一个选项，这里的name属性值必须一致，否则不能产生互斥性。
         ② 让某一项默认选中，可以使用checked属性。
         -->
      <input type="radio" name="sex" value="男" checked>男
      <input type="radio" name="sex1" value="女">女
    </td>
  </tr>
  <tr>
    <td>
      密码：
    </td>
    <td>
      <input type="password" name="password" >
    </td>
  </tr>
  <tr>
    <td>
      爱好：
    </td>
    <td>
      <!--复选框：
        ① 所有的name属性一致，提交到后台是一个数组，如：
          java-servlet中：
          String[] interests = request.getParameterValues("interest")
        ② 使用checked属性代表默认选择项。
        ③ 其中的value代表提交到后台的值。
      -->
      <input type="checkbox" name="interest" value="swim" checked>游泳
      <input type="checkbox" name="interest" value="game">游戏
      <input type="checkbox" name="interest" value="song">唱歌
      <input type="checkbox" name="interest" value="dancer">跳舞
      <input type="checkbox" name="interest" value="ball" checked>打球
    </td>
  </tr>
  <tr>
    <td>
      学历：
    </td>
    <td>
      <!--下拉式列表框：
          ① multiple: 代表可以多选，要配合size属性，代表显示出来几个选项，可以结合ctrl键进行多选。
          ② option: 代表其中一个选择项，其中的value代表提交到后台的值，中间的代表显示在下拉框中的文本。
          ③ selected: 代表选中某一项或多项。
      -->
      <select name="xueli" multiple size="3">
        <option value="大专">大专</option>
        <option value="本科" selected>本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>上传照片：</td>
    <td>
      <input type="file" name="phone" id="">
    </td>
  </tr>
  <tr>
    <td>工作经历：</td>
    <td>
      <textarea name="intro"  cols="23" rows="4"></textarea>
      <!--隐藏域控件，主要负责在页面间传值-->
      <input type="hidden" name="sid" value="1001">
    </td>
  </tr>
  <tr>
    <td>常用按钮：</td>
    <td>
      <!--
        普通按钮：用于人机交互
        图片按钮：用于提交表单
      -->
      <input type="button" value="普通按钮" onclick="alert('当前时间：' + new Date().toLocaleString())">
      <input type="image" src="../img/btn.png" alt="">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <!--提交按钮：submit 可以将表单数据提交到后台-->
      <input type="submit" value="提交">
      <!--重置按钮：reset 可以清空表单数据-->
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>
